.el-container {
  .el-header {
    height: 6vh;

    .header {
      height: 6vh;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: fixed;
      top: 0;
      left: 160px;
      right: 0;
      z-index: 1;
      padding: 0 $padding-10;
      border-bottom: 1px solid #dcdcdc82;

      .el-link {
        font-size: $padding-20;

        &:first-child {
          margin-right: $padding-10;
        }
      }

      .el-input {
        width: 40%;
        margin-left: $padding-20;
      }

      .right {
        margin-left: auto;
      }
    }
  }

  .el-aside {
    width: $asideWidth;
    background: $greyColor;
    padding: $padding-10;
    position: fixed;
    top: 0;
    bottom: 0;

    .menu {
      .title {
        margin: $padding-20 0;
      }

      .menus {
        &>a {
          display: block;
          padding: 4px $padding-20;
          margin: $padding-10 0;

          .i-icon {
            vertical-align: middle;
          }
        }
      }

      .active {
        color: $whiteColor;
        border-radius: 5px;
        background: linear-gradient(to right, $activeColor1, $activeColor2);
      }
    }
  }

  .el-main {
    flex: 1;
    width: 100%;
    background: $whiteColor;
    padding-left: 25vw;
  }
}

.module-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid $greyColor;
  padding: 10px;
  background: $whiteColor;

  .flex-1 {
    flex: 1 1 0%;
  }

  .player-controller {
    width: 190px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.75rem;
  }
}